<page-grid>
  <div nz-row nzGutter="24">
    <div nz-col nzMd="24" nzLg="7">
      <nz-card [nzBordered]="false" class="mb-lg" [nzLoading]="!user">
        <ng-container *ngIf="user">
          <div class="avatarHolder">
            <img src="{{ user.avatar }}">
            <div class="name">{{ user.name }}</div>
            <div>{{ user.signature }}</div>
          </div>
          <div class="detail">
            <p>
              <i class="title"></i>
              {{ user.title }}
            </p>
            <p>
              <i class="group"></i>
              {{ user.group }}
            </p>
            <p>
              <i class="address"></i>
              {{ user.geographic.province.label }}       {{ user.geographic.city.label }}
            </p>
          </div>
          <nz-divider nzDashed></nz-divider>
          <div class="tags">
            <div class="tagsTitle">标签</div>
            <nz-tag *ngFor="let t of user.tags">{{ t.label }}</nz-tag>
            <nz-tag *ngIf="!taging" (click)="tagShowIpt()" class="ant-tag__plus">
              <i nz-icon nzType="plus"></i>
            </nz-tag>
            <input *ngIf="taging" #tagInput nz-input [(ngModel)]="tagValue" (blur)="tagBlur()" (keydown)="tagEnter($event)" nzSize="small" type="text" style="width: 78px">
          </div>
          <nz-divider nzDashed></nz-divider>
          <div class="team">
            <div class="teamTitle">团队</div>
            <nz-spin [nzSpinning]="!notice">
              <div nz-row nzGutter="36">
                <div nz-col *ngFor="let t of notice" nzLg="24" nzXl="12">
                  <a href="#" class="text-truncate">
                    <nz-avatar [nzSrc]="t.logo" nzSize="small"></nz-avatar>
                    {{ t.member }}
                  </a>
                </div>
              </div>
            </nz-spin>
          </div>
        </ng-container>
      </nz-card>
    </div>
    <div nz-col nzMd="24" nzLg="17">
      <nz-card class="tabsCard" [nzBordered]="false" [nzTitle]="tagTitleTpl">
        <ng-template #tagTitleTpl>
          <nz-tabset nzSize="large" [nzSelectedIndex]="pos">
            <nz-tab *ngFor="let i of tabs" [nzTitle]="i.tab" (nzClick)="to(i)"></nz-tab>
          </nz-tabset>
        </ng-template>
        <router-outlet></router-outlet>
      </nz-card>
    </div>
  </div>
</page-grid>